<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件的修饰符</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <style>
        .divList {
            width: 300px;
            height: 200px;
            background-color: aquamarine;
            overflow: auto;
        }

        .item {
            width: 300px;
            height: 200px;
        }
    </style>
</head>

<body>

    <!-- 
        Vue当中提供的事件修饰符
            .stop：停止事件冒泡。等同于 event.stopPropagation()
            .prevent：等同于 event.preventDefault() 阻止事件的默认行为
            .capture：添加事件监听器时使用事件捕获模式
                        添加事件监听器时使用事件捕获方式：
                            ①一种是从内到外添加（事件冒泡模式）
                            ②一种是从外到内添加（事件捕获方式）
            .self：这个事件如果是“我自己元素”上发生的事件，这个事件不是别人给我传递过来的事件，则执行对应的程序
            .passive：passive翻译为顺从/不抵抗。无需等待，直接继续（立即）执行事件的默认行为
                        .passive和.prevent修饰符是对立的，不可共存 （一起使用时报错）
                        .prevent：阻止事件的默认行为
                        .passive：解除事件的默认行为
    -->

    <!-- 准备一个容器 -->
    <div id="app">
        <h1>{{msg}}</h1>

        <!-- 停止事件冒泡 -->
        <div @click="san">
            <div @click.stop="er">
                <button @click="yi">事件冒泡</button>
            </div>
        </div>

        <!-- 阻止事件的默认行为 -->
        <a href="https://www.baidu.com" @click.prevent="yi">百度</a>

        <!-- 添加事件监听器时使用事件捕获方式 -->
        <div @click.capture="san">
            <div @click="er">
                <button @click="yi">事件捕获</button>
            </div>
        </div>

        <!-- self修饰符 -->
        <div @click="san">
            <div @click.self="er">
                <button @click="yi">self修饰符</button>
            </div>
        </div>
        <div @click="san">
            <div @click="er">
                <!-- 
                    在Vue当中，事件修饰符可以使用多个联合使用（执行先后顺序，从  左 → 右 ） 
                 -->
                <button @click.self.stop="yi">self修饰符</button>
            </div>
        </div>

        <!-- once修饰符：事件只发生一次 -->
        <button @click.once="yi">事件只发生一次</button>


        <!-- passive 解除事件的默认行为 -->
        <div class="divList" @wheel.passive="testPassive"> <!-- 鼠标滚轮事件（先执行滑动的操作，在处理函数的内容） -->
            <div class="item">div1</div>
            <div class="item">div2</div>
            <div class="item">div3</div>
            <div class="item">div4</div>
        </div>

    </div>

    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                msg: '事件修饰符'
            },
            methods: {
                yi(event) {
                    // alert('去百度！')

                    // 手动调用事件对象的preventDefault()方法，可以阻止事件的默认行为
                    // event.preventDefault(); 

                    // 也可以使用修饰符的方式，在@click.prevent="yi"

                    alert(1)
                },
                er() {
                    alert(2)
                },
                san() {
                    alert(3)
                },
                testPassive(event) {

                    // passive修饰后，下次滚动不会等待for循环结束后才滑动
                    for (let i = 0; i < 10000; i++) {
                        console.log('test passive');
                    }
                    // console.log('testPassive')
                    // 阻止事件默认行为
                    // event.preventDefault()

                }
            }
        })

    </script>


</body>


</html>